<template>
  <!--
    底部导航栏，设置 route 路由模式，切换时路由对应的 tab 会高亮；
    to 属性设置跳转的路由地址，可以是字符串 to="/category"，也可以是对象 :to="{name: 'home'}"；
    icon 属性设置显示的图标；
    badge 属性设置图标右上角徽标的内容；
  -->
  <van-tabbar route>
    <van-tabbar-item icon="home-o" :to="{name: 'home'}">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="gift-o" to="/recommend">推荐</van-tabbar-item>
    <van-tabbar-item icon="cart-o" badge="20" to="/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>

</script>
<style lang='scss' scoped>
  // 增加 fixed 权重，为了避免其他样式干扰
  .van-tabbar {
    position: fixed !important;
    border-top: 1px solid #999;
  }
</style>
